<template>
    <div class="production-filter">
        <el-form :model="productionForm" label-width="100px">
            <!-- 生产类型 -->
            <el-form-item label="生产类型：" required>
                <el-radio-group v-model="productionForm.productionType">
                    <el-radio value="outerbox">外箱生产</el-radio>
                    <el-radio value="packouterbox">外箱打包</el-radio>
                    <el-radio value="backing">裱瓦生产</el-radio>
                    <el-radio value="diecutting">模切生产</el-radio>
                    <el-radio value="innerbox">内盒生产</el-radio>
                    <el-radio value="packinnerbox">内盒打包</el-radio>
                    <el-radio value="warehouse">直接入库</el-radio>
                </el-radio-group>
            </el-form-item>
            <!-- 生产状态 -->
            <el-form-item label="生产状态：" required>
                <el-checkbox-group v-model="productionForm.productionStatus">
                    <el-checkbox label="生产中" value="producing" />
                    <el-checkbox label="等待中" value="waiting" />
                    <el-checkbox label="已完成" value="finished" />
                </el-checkbox-group>
            </el-form-item>
        </el-form>
    </div>
    <div v-if="data.length !== 0" class="production-list">
        <div style="width: 100%; height: calc(100vh - 310px)">
            <el-auto-resizer>
                <template #default="{ height }">
                    <el-scrollbar :height="height">
                        <el-descriptions title="数据列表" :column="6" border size="small">
                            <template #extra>
                                <el-text type="warning" tag="b">当前有{{ total }}条数据</el-text>
                            </template>
                            <div v-for="(item, index) in data" :key="index">
                                <!-- 产品名称 -->
                                <el-descriptions-item>
                                    <template #label>
                                        <div class="flex items-center">
                                            <el-icon class="el-icon--left"><BrandProducthunt /></el-icon>
                                            产品名称
                                        </div>
                                    </template>
                                    <el-text tag="b" type="primary">
                                        {{ item.purchaseId.productName }}<el-text type="warning"> * {{ item.purchaseId.purchaseNumber }}只</el-text>
                                    </el-text>
                                </el-descriptions-item>
                                <!-- 面纸尺寸 -->
                                <el-descriptions-item>
                                    <template #label>
                                        <div class="flex items-center">
                                            <el-icon class="el-icon--left"><BrandProducthunt /></el-icon>
                                            面纸尺寸
                                        </div>
                                    </template>
                                    <el-text tag="b" type="primary">
                                        {{ item.purchaseId.tissueSize == '' ? '/' : item.purchaseId.tissueSize }}
                                    </el-text>
                                </el-descriptions-item>
                                <!-- 瓦楞尺寸 -->
                                <el-descriptions-item>
                                    <template #label>
                                        <div class="flex items-center">
                                            <el-icon class="el-icon--left"><BrandProducthunt /></el-icon>
                                            瓦楞尺寸
                                        </div>
                                    </template>
                                    <el-text tag="b" type="primary">
                                        {{ item.purchaseId.corrugatedSize == '' ? '/' : item.purchaseId.corrugatedSize }}
                                    </el-text>
                                </el-descriptions-item>
                                <!-- 订单状态 -->
                                <el-descriptions-item>
                                    <template #label>
                                        <div class="flex items-center">
                                            <el-icon class="el-icon--left"><StatusPartialFail /></el-icon>
                                            订单状态
                                        </div>
                                    </template>
                                    <el-text tag="b" :type="item.purchaseId.orderStatus">
                                        {{ matchOrderStatus(item.purchaseId.orderStatus) }}
                                    </el-text>
                                </el-descriptions-item>
                                <!-- 生产状态 -->
                                <el-descriptions-item>
                                    <template #label>
                                        <div class="flex items-center">
                                            <el-icon class="el-icon--left"><StatusPartialFail /></el-icon>
                                            生产状态
                                        </div>
                                    </template>
                                    <el-text tag="b" :type="productionStatusMap(item.productionStatus).type">
                                        {{ productionStatusMap(item.productionStatus).text }}
                                    </el-text>
                                </el-descriptions-item>
                                <!-- 送货日期 -- 只有非直接入库才展示 -->
                                <el-descriptions-item v-if="productionForm.productionType !== 'warehouse'">
                                    <template #label>
                                        <div class="flex items-center">
                                            <el-icon class="el-icon--left"><StatusPartialFail /></el-icon>
                                            送货日期
                                        </div>
                                    </template>
                                    <b :class="matchOrderRemainingDeliveryTime(item.purchaseId.orderDeliveryDate)">
                                        {{
                                            item.purchaseId.orderDeliveryDate == '暂无送货计划'
                                                ? '暂无送货计划'
                                                : formatTimeZone(item.purchaseId.orderDeliveryDate as unknown as Date, 'YYYY-MM-DD')
                                        }}
                                    </b>
                                </el-descriptions-item>
                                <!-- 撤回生产 -- 直接入库才展示 -->
                                <el-descriptions-item v-if="productionForm.productionType == 'warehouse'">
                                    <template #label>
                                        <div class="flex items-center">
                                            <el-icon class="el-icon--left"><ArrowStepInLeft28Regular /></el-icon>
                                            撤回入库
                                        </div>
                                    </template>
                                    <el-button plain type="warning" @click="revokeProductionEvent(item.purchaseId._id)">撤回</el-button>
                                </el-descriptions-item>
                            </div>
                        </el-descriptions>
                    </el-scrollbar>
                </template>
            </el-auto-resizer>
        </div>
    </div>
    <div v-if="data.length == 0" style="width: 100%; height: calc(100vh - 340px)">
        <el-empty description="请先筛选生产类型或状态" />
    </div>
    <div class="production-pagination">
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            @change="handleSizeChange"
            :total="total"
            :page-sizes="[20, 40, 80, 100]"
            layout="prev, pager, next, sizes, jumper, total"
            background
        />
    </div>
</template>

<script setup lang="ts">
import { getProductionList, revokeProductionControl } from '@/api/production';
import { ArrowStepInLeft28Regular } from '@vicons/fluent';
import { BrandProducthunt } from '@vicons/tabler';
import { formatTimeZone } from '@utils/calculate';

/* ******************************通用属性/方法****************************** */
// 生产筛选表单数据
const productionForm = reactive<{ productionType: string; productionStatus: any[] }>({
    productionType: '',
    productionStatus: ['waiting', 'producing'],
});
// 展示数据
const data = reactive<AjaxResponse['productionList']>([]);
// 获取生产列表事件
const getProductionListEvent = () => {
    // 重置数据
    data.length = 0;
    total.value = 0;
    getProductionList(productionForm.productionType, productionForm.productionStatus, currentPage.value, pageSize.value).then((res) => {
        // 加载数据
        total.value = res.total;
        res.data.forEach((item) => {
            if (item.purchaseId !== null && typeof item.purchaseId !== 'string') {
                data.push(item);
            }
        });
    });
};
// 监听筛选表单数据变化
watch(
    () => productionForm,
    () => {
        if (productionForm.productionStatus.length == 0) {
            ElMessage.warning('请至少选择一个生产状态');
            return;
        }
        if (productionForm.productionType == '') {
            ElMessage.warning('请至少选择一个生产类型');
            return;
        }
        // 触发筛选事件
        getProductionListEvent();
    },
    { deep: true }
);
// 撤销到生产管控
const revokeProductionEvent = (purchaseId: string) => {
    revokeProductionControl(purchaseId).then((res) => {
        ElMessage.success(res.message);
        // 重新获取数据
        getProductionListEvent();
    });
};

/* ******************************工具属性/方法****************************** */
// 匹配订单状态
const matchOrderStatus = (status: 'primary' | 'warning' | 'danger') => {
    let obj = {
        primary: '正常',
        warning: '加急',
        danger: '特急',
    };
    return obj[status];
};
// 匹配生产状态
const productionStatusMap = (productionStatus: string): any => {
    switch (productionStatus) {
        case 'waiting':
            return { type: 'info', text: '等待中' };
        case 'producing':
            return { type: 'warning', text: '生产中' };
        case 'finished':
            return { type: 'success', text: '已完成' };
        default:
            return { type: 'danger', text: '未知' };
    }
};
// 匹配订单剩余送货时间
const matchOrderRemainingDeliveryTime = (time: string) => {
    // 暂无送货计划
    if (time == '暂无送货计划') {
        return 'text-gray-500';
    }
    // 剩余送货时间
    const remainingDeliveryTime = new Date(time).getTime() - new Date().getTime();
    // 剩余送货时间小于24小时，显示红色
    if (remainingDeliveryTime < 24 * 60 * 60 * 1000) {
        return 'text-red-500';
    }
    // 剩余送货时间小于48小时，显示橙色
    if (remainingDeliveryTime < 48 * 60 * 60 * 1000) {
        return 'text-orange-500';
    }
    // 剩余送货时间大于48小时，显示绿色
    return 'text-green-500';
};

/* ******************************分页属性/方法****************************** */
// 当前页码
const currentPage = ref(1);
// 每页数量
const pageSize = ref(20);
// 总数量
const total = ref(0);
const handleSizeChange = () => {
    getProductionListEvent();
};
</script>

<style scoped lang="scss">
.production-filter {
    height: 100px;
}
.production-list {
    height: calc(100vh - 340px);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.production-pagination {
    height: 60px;
    width: 100%;
    display: flex;
    align-items: center;
}
</style>
